<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>算法管理</title>
<%-- 全站样式 --%>
<jsp:include page="/WEB-INF/jsps/template_style.jsp"></jsp:include>


<!--文件夹所需js、css-->
<link rel="stylesheet" href="assets/css/folder/folder.css">
<script src="assets/js/folder/folder.js"></script>

<!-- 日历 -->
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css">

<!-- 右击菜单js -->
<script src="assets/js/folder/BootstrapMenu.min.js"></script>
</head>

<body>
	<div class="page-container">
		<%--侧边栏 --%>
		<jsp:include page="/WEB-INF/jsps/sidebar.jsp"></jsp:include>
		<section class="gallery-env">
		<div class="main-content col-md-12">
			<div class="row">
				<div class="col-md-12">
					<%--导航栏 --%>
					<jsp:include page="/WEB-INF/jsps/navbar.jsp"></jsp:include>
				</div>
			</div>
			<div class="panel">
				<!-- 工具栏 -->
				<div class="row">
					<div class="col-sm-6 ">
						<h2 style="float: left; margin-top: -5px;">算法文件夹</h2>
					</div>
					<div class="fa-hover col-sm-offset-2 col-sm-2" id="create">
						<a class="btn  btn-default"><i class="fa-cloud-upload"></i>新建文件夹</a>
					</div>
					<div class="fa-hover col-sm-2 upload1">
						<a class="btn btn-default "><i class="fa-upload"></i>上传算法</a>
					</div>
				</div>
			</div>
			<!--算法文件夹栏目-->
			<div class="panel">
				<!-- 收藏夹 -->
				<section class="mailbox-env"> <!-- data-curFavoriteID表示当前显示的收藏夹的ID -->
				<!-- data-userID表示当前用户ID -->
				<div class="panel-body panel-border">
					<table class="favoriteTable table table-hover" data-userID="3">
						<thead>
							<tr>
								<th class="col-sm-6">名称</th>
								<th class="col-sm-3"></th>
								<th class="col-sm-3">时间</th>
							</tr>
						</thead>
						<tbody>
							<c:choose>
								<c:when test="${dirStatus.equals('0')}">
									<tr class="favorite" data-favoriteID="2" style="cursor: pointer">
										<td><span style="color: red;">${dirEmpty}</span></td>
									</tr>
								</c:when>
								<c:otherwise>
									<c:forEach var="dir" items="${algorithmDir}">
										<tr class="favorite algorithmInto" data-favoriteID="${dir.id}"
											style="cursor: pointer">
											<td class="favoriteName"><i class="fa-folder-o"></i><a
												href="getAlgorithm.do?fileId=${dir.id}">&nbsp;&nbsp;${dir.fileName}</a>
											</td>
											<td class="favoriteTool">
												<ul class="album-options list-unstyled list-inline hover"
													style="display: none">
													<li><a class="rename" href="#"> <i class="fa-edit"></i>重命名
													</a></li>
													<li><a class="deleteFavorite" href="#"> <i
															class="fa-trash"></i>删除
													</a></li>
												</ul>
											</td>
											<td class="favoriteCreateTime">${dir.createTime}</td>
										</tr>
									</c:forEach>
								</c:otherwise>
							</c:choose>
						</tbody>
					</table>
				</div>
				</section>
			</div>
		</section>
		<%--页脚 --%>
		<jsp:include page="/WEB-INF/jsps/footer.jsp"></jsp:include>
	</div>
	</div>

	<script type="text/javascript">
	<!--上传算法事件-->
		$(document).on(
				"click",
				".upload1",
				function() {
					$.ajax({
						url : "/getAlgorithmDirUpload.do",
						type : "POST",
						dataType : "json",
						success : function(data) {
							if (data.dirStatus == 0) {
								$('#myModal').modal('hide');
							} else {

								$('#fileID').html("");
								$.each(data.algorithmDir, function(n, value) {
									$('#fileID').append(
											"<option value='"+value.id+
	    		     					 "'>"
													+ value.fileName
													+ "</option>");
								});
							}
						},
						error : function(XMLHttpRequest, textStatus,
								errorThrown) {
							alert(XMLHttpRequest.status);
							alert(XMLHttpRequest.readyState);
							alert(textStatus);
						},
					});
					$('#uploadmodal').modal('show');
				});
	</script>
	<!-- 模态框（Modal） -->
	<!--上传算法开始-->
	<div class="modal fade" id="uploadmodal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">上传算法</h4>
				</div>
				<div class="modal-body">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">请填写上传信息</h3>
						</div>
						<div class="panel-body">
							<form action="/upload/addAlgorithm.do" role="form"
								class="form-horizontal" method="post" enctype="multipart/form-data">
								<div class="form-group">
									<label class="col-sm-3 control-label" for="algorithmName">算法名称
										<font color="red">*</font>
									</label>
									<div class="col-sm-6">
										<input type="text" class="form-control" name="algorithmName"
											id="algorithmName" placeholder="请填写您的算法名称" maxlength="16" required>
									</div>
								</div>
								<div class="form-group-separator"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label" for="algorithmVesion">算法版本号
										<font color="red">*</font>
									</label>
									<div class="col-sm-6">
										<input type="text" class="form-control" name="algorithmVesion"
											id="algorithmVesion" placeholder="请填写您的算法版本号" maxlength="16" required>
									</div>
								</div>
								<div class="form-group-separator"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label" for="algorithmSort">算法类型
										<font color="red">*</font>
									</label>
									<div class="col-sm-6">
										<select class="form-control" name="algorithmSort" id="algorithmSort"
											required>
											<option value="0">预处理算法</option>
											<option value="1">分析算法</option>
										</select>
									</div>
								</div>
								<div class="form-group-separator"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label" for="fileID">存放文件夹 <font
										color="red">*</font></label>
									<div class="col-sm-6">
										<select class="form-control" name="fileID" id="fileID" required>

										</select>
									</div>
								</div>
								<div class="form-group-separator"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label" for="algorithmDscription">算法描述
										<font color="red">*</font>
									</label>
									<div class="col-sm-6">
										<textarea class="form-control autogrow" cols="5"
											name="algorithmDscription" id="algorithmDscription"
											placeholder="请填写您的算法描述" maxlength="200" required></textarea>
									</div>
								</div>
								<div class="form-group-separator"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label" for="file">jar包 <font
										color="red">*</font></label>
									<div class="col-sm-8">
										<input type="file" name="file" value="" class="col-sm-8" required />
									</div>
								</div>
								<div class="form-group-separator"></div>
								<div class="form-group col-sm-6 pull-right">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<button type="submit" class="btn btn-primary">上传</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--上传算法结束-->

	<!--检索算法文件开始-->
	<div class="modal fade" id="searchmodal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">算法检索</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-8 col-md-offset-2">
							<div class="form-group">
								<label class="control-label">算法名称</label> <input type="text"
									class="form-control" name="speName" />
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8 col-md-offset-2">
							<div class="form-group">
								<label class="control-label">算法类别</label> <input type="text"
									class="form-control" name="favoriteName" />
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8 col-md-offset-2">
							<div class="form-group">
								<label class="control-label">收藏夹名称</label> <input type="text"
									class="form-control" name="favoriteName" />
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8 col-md-offset-2">
							<div class="form-group">
								<label class="control-label">保存时间-上限</label> <input type="text"
									class="form-control datetimepicker datatimepicker1" name="startDate"
									readonly />
								<script type="text/javascript">
									$(".datatimepicker1").datetimepicker({
										format : "yyyy-mm-dd",
										autoclose : true,
										todayBtn : true,
										startView : 'year',
										minView : 'month',
										maxView : 'year',
										language : 'zh-CN',
										pickerPosition : "bottom-left"
									});
								</script>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8 col-md-offset-2">
							<div class="form-group">
								<label class="control-label">保存时间-下限</label> <input type="text"
									class="form-control datetimepicker datatimepicker2" name="endDate"
									readonly />
								<script type="text/javascript">
									$(".datatimepicker2").datetimepicker({
										format : "yyyy-mm-dd",
										autoclose : true,
										todayBtn : true,
										startView : 'year',
										startView : 'year',
										minView : 'month',
										language : 'zh-CN',
										pickerPosition : "bottom-left"
									});
								</script>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-info" id="searchSpectrum"
						data-dismiss="modal">检索</button>
				</div>
			</div>
		</div>
	</div>
	<!--检索算法文件结束-->
	<%-- 尾部内容 --%>
	<jsp:include page="/WEB-INF/jsps/template_tail.jsp" />
	<!-- 文件夹 -->
	<script src="assets/js/algorithmDir.js"></script>
</body>
</html>